<template>
	<view class="change">
		<u-modal
			mode="center"
			:show="showGoodsChange"
			title="商品变动"
			confirmText="继续结算"
			cancelText="取消结算"
			showCancelButton
			confirmColor="#e3230e"
			@confirm="confirmChange"
			@cancel="closeChange"
			@close="closeChange">
			<view class="change-popup">
				<view class="change-popup-content">
					<scroll-view class="change-list" scroll-y>
						<view class="change-list-box">
							<view class="change-item main-flex" v-for="(item, index) in goodsList" :key="item.id">
								<view class="change-item-img">
									<image
										class="change-item-img-url"
										mode="aspectFill"
										:src="imgUrl(item?.newGoods?.productImg || item?.oldGoods?.productImg)"></image>
									<view class="change-item-img-other main-flex" v-if="!item?.newGoods">
										<view class="change-item-img-other-tag">商品已失效</view>
									</view>
									<view class="change-item-img-other main-flex" v-if="item?.newGoods?.regionCode && userStore.regionCode != item?.newGoods?.regionCode">
										<view class="change-item-img-other-tag">不在配送区</view>
									</view>
								</view>
								<view class="change-item-r main-flex-item main-flex">
									<view class="change-item-name">{{item?.newGoods?.productName || item?.oldGoods?.productName}}</view>
									<view class="change-item-region"  v-if="item?.newGoods?.regionCode">配送区域：{{arrText(setStore.provinceList, item?.newGoods?.regionCode)}}</view>
									<view class="change-item-other main-flex" v-if="item?.newGoods?.price == item?.oldGoods?.price">
										<view class="change-item-price price">
											<text>￥</text>
											<text class="change-item-price-num">{{moneyStr(item?.newGoods?.price)}}</text>
											<!-- <text>/{{item?.newGoods?.productUnit}}</text> -->
										</view>
									</view>
									<view class="change-item-other main-flex" v-else>
										<view class="change-item-price old">
											￥{{moneyStr(item?.oldGoods?.price)}}
											<!-- <text>/{{item?.oldGoods?.productUnit}}</text> -->
										</view>
										<view class="change-item-price price">
											<text>￥</text>
											<text class="change-item-price-num">{{moneyStr(item?.newGoods?.price)}}</text>
											<!-- <text>/{{item?.newGoods?.productUnit}}</text> -->
										</view>
									</view>
								</view>
							</view>
						</view>
					</scroll-view>
				</view>
			</view>
		</u-modal>
	</view>
</template>

<script setup>
  import { computed, ref } from 'vue'
	import useUserStore from "@/store/modules/user"
	import useSetStore from '@/store/modules/set'
	import { arrText } from "@/utils/ty"
	
	const userStore = useUserStore()
	const setStore = useSetStore()
	
	const props = defineProps({
		showGoodsChange: {
			type: Boolean,
			default: false
		},
		goodsList: {
			type: Array,
			default: []
		}
	})
	const emits = defineEmits(['close', 'confirm'])
	
	// 关闭弹窗
	const closeChange = () => {
		emits('close')
	}
	
	// 确认
	const confirmChange = () => {
		emits('confirm')
	}
</script>

<style lang="scss" scoped>
  .change {
		:deep(.u-modal__content) {
			padding: 20rpx;
		}
		&-popup {
			width: 690rpx;
			border-radius: 20rpx;
			background-color: #ffffff;
			&-title {
				height: 48px;
				font-size: 16px;
				font-weight: 600;
				text-align: center;
				justify-content: center;
				padding: 0 15px;
			}
			&-content {
				// padding: 0 15px;
			}
			&-money {
				text-align: center;
				font-size: 28rpx;
				color: $primary-color;
				font-weight: 600;
				&-num {
					font-size: 36rpx;
				} 
			}
			&-way {
				margin-top: 40rpx;
				&-item {
					padding-top: 10px;
					&+.pay-popup-way-item {
						border-top: 1px solid $line-color;
					}
					&-icon {
						width: 80rpx;
						height: 80rpx;
						&-img {
							width: 80rpx;
							height: 80rpx;
						}
					}
					&-name {
						font-size: 28rpx;
						margin-left: 30rpx;
					}
					&-check {
						margin-left: auto;
					}
					&-no {
						display: none;
					}
				}
			}
			&-btns {
				justify-content: center;
				padding: 20rpx 0;
				&-item {
					width: 200rpx;
					height: 68rpx;
					border-radius: 34rpx;
					font-size: 28rpx;
					justify-content: center;
				}
			}
			.change-list {
				max-height: 600rpx;
			}
			.change-item {
				&-img {
					position: relative;
					width: 160rpx;
					height: 160rpx;
					border-radius: 10rpx;
					overflow: hidden;
					&-url {
						width: 100%;
						height: 100%;
					}
					&-other {
						position: absolute;
						width: 100%;
						height: 100%;
						top: 0rpx;
						left: 0rpx;
						background-color: rgba(255, 255, 255, .5);
						justify-content: center;
						&-tag {
							background-color: #333;
							color: #FFFFFF;
							font-size: 20rpx;
							border-radius: 50px;
							padding: 4rpx 10rpx;
						}
					}
				}
				&-r {
					min-height: 160rpx;
					flex-direction: column;
					justify-content: space-between;
					align-items: flex-start;
					padding: 0 12rpx;
				}
				&-name {
					width: 100%;
					font-size: 26rpx;
					font-weight: 600;
				}
				&-region {
					font-size: 24rpx;
					color: #ffffff;
					margin-top: 4rpx;
					background-color: #999999;
					border-radius: 4rpx;
					padding: 0 6rpx;
				}
				&-other {
					width: 100%;
					margin-top: 4rpx;
				}
				&-unit {
					font-size: 24rpx;
					margin-top: 4rpx;
				}
				&-price {
					font-size: 20rpx;
					font-weight: 600;
					&-num {
						font-size: 26rpx;
					}
				}
				.old {
					text-decoration: line-through;
					margin-right: 20rpx;
				}
			}
		}
	}
</style>
